<template>
	<view class="container">
		<view class="header">
			<view class="type" v-for="(item,index) in typeList" :class="current===item.type ? 'selected':'' "
				:key="item.type" @click="handleChangeType(index,item)">
				{{item.name}}
			</view>
		</view>
		<view class="order-list" v-if="orderList.length">
			<view class="order-item" v-for="(item,index) in orderList" :key="index">
				<view class="order-header">
					<view class="status">{{item._status._title}}</view>
					<view class="time">{{item._add_time}}</view>
				</view>
				<view class="order-content" v-for="obj in item.cartInfo">
					<image :src="obj.productInfo.image" mode=""></image>
					<view class="text">
						<view class="title">
							<view class="name">{{obj.productInfo.store_name}}</view>
							<view class="detail">
								<view class="num">{{obj.productInfo.attrInfo.suk}}</view>
								<view class="sum-price">{{obj.sum_price}}</view>
							</view>
							<view class="cart_num">x{{obj.cart_num}}</view>
						</view>
					</view>
				</view>
				<view class="total">
					<view class="total-num">
						共 <text>{{item.total_num}}</text>件商品
					</view>
					<view class="total-price">
						合计：<text>￥{{item.total_price}}</text>
					</view>
				</view>
				<view class="option-btn" v-if="item._status._type===0">
					<view class="cancel-order" @click="handleCancelOrder(item,index)">取消订单</view>
					<view class="buy-now" @click="handleBuyNow(item.order_id)">立即付款</view>
				</view>
				<view class="option-btn" v-if="item._status._type===1">
					<view class="buy-now">查看详情</view>
				</view>
			</view>
			<view class="divider">
				<u-divider text="没有更多内容啦~~"></u-divider>
			</view>
		</view>
		<view v-else style="padding-top: 75rpx;">
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import { order } from '../../api';
	export default {
		onLoad(type) {
			this.getOrderList(type);
			this.current = parseInt(type.type);
		},
		data() {
			return {
				typeList: [
					{ name: '全部', type: 9 },
					{ name: '待付款', type: 0 },
					{ name: '待发货', type: 1 },
					{ name: '待收货', type: 2 },
					{ name: '待评价', type: 3 },
				],
				current: 0,
				orderList: [],
			}
		},
		methods: {
			async handleChangeType(index, item) {
				this.current = item.type;
				let { status, msg, data } = await order.order_list({ type: item.type });
				if (status === 200) {
					this.orderList = data;
				}
			},
			// 获取订单列表
			async getOrderList(type) {
				let { status, msg, data } = await order.order_list(type);
				if (status === 200) {
					this.orderList = data;
				}
			},
			// 取消订单
			async handleCancelOrder(item, index) {
				console.log(item.order_id);
				let { status, msg, data } = await order.cancel_order({ id: item.order_id });
				if (status === 200) {
					this.orderList.splice(index, 1);
					uni.showToast({
						title: msg,
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: msg,
						icon: 'error'
					})
				}
			},
			// 立即付款
			async handleBuyNow(id) {
				let { status, msg, data } = await order.order_detail(id);
				if (status === 200) {
					uni.setStorageSync('orderDetail', data);
					uni.navigateTo({
						url: '/pages/order/order',
					})
				} else {
					uni.showToast({
						title: msg,
						icon: 'error'
					})
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f4f4f4;
	}

	.container {

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #ffffff;
			position: fixed;
			top: 70rpx;
			left: 0;
			width: 100%;
			z-index: 100;

			.type {
				padding: 10rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				font-size: 28rpx;
				color: #585353;
				border-bottom: 4rpx solid transparent;
			}

			.selected {
				border-bottom: 4rpx solid #c55a5c;
			}
		}

		.order-list {
			padding-top: 75rpx;

			.order-item {
				background-color: #ffffff;
				margin: 30rpx auto;
				padding: 25rpx;
				width: 710rpx;

				.order-header {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.status {
						font-size: 24rpx;
						color: #c55a5c;
					}

					.time {
						font-size: 21rpx;
						color: #999999;
					}
				}

				.order-content {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-top: 2rpx solid #eee;
					margin: 20rpx auto;
					padding: 20rpx 0rpx;

					image {
						width: 165rpx;
						height: 165rpx;
					}

					.text {
						width: 470rpx;

						.title {

							.name {
								font-size: 26rpx;
								color: #333333;
								overflow: hidden;
								text-overflow: ellipsis;
								/* 固定搭配 */
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								margin-bottom: 20rpx;
							}

							.detail {
								display: flex;
								justify-content: space-between;
								align-items: center;
								font-size: 24rpx;
								margin-bottom: 20rpx;

								.num {
									color: #aaaaaa;
								}

								.sum-price {
									color: #666666;
								}
							}

							.cart_num {
								text-align: right;
								color: #999999;
							}
						}
					}
				}

				.total {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					border-top: 2rpx solid #eee;
					padding-top: 15rpx;
					font-size: 24rpx;
					color: #383636;
					margin-bottom: 31rpx;

					.total-num {
						margin-right: 15rpx;

						text {
							color: #c55a5c;
						}
					}

					.total-price {

						text {
							color: #c55a5c;
							font-weight: bold;
						}
					}
				}

				.option-btn {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					font-size: 24rpx;
					color: #383636;

					.cancel-order {
						height: 45rpx;
						line-height: 45rpx;
						padding: 11rpx 29rpx;
						text-align: center;
						border: 2rpx solid #aaaaaa;
						border-radius: 40rpx;
						margin-right: 21rpx;
					}

					.buy-now {
						height: 45rpx;
						line-height: 45rpx;
						padding: 11rpx 29rpx;
						text-align: center;
						border: 2rpx solid #c55a5c;
						border-radius: 40rpx;
						color: #c55a5c;
					}
				}
			}
		}

		.divider {
			padding: 0rpx 150rpx;
		}
	}
</style>